<template>
    <div>
        
        
        <router-view></router-view>
        
        <van-tabbar style="background-color: #EDEDED; " 
            v-model="active"  
            active-color="#05C160" 
            inactive-color="#000000"
            >
            
            <van-tabbar-item style="background-color: #EDEDED;" icon="chat-o" @click="kongzhitupian1" > Chats</van-tabbar-item>
           
            <van-tabbar-item style="background-color: #EDEDED;margin-top: 12px;"  @click="kongzhitupian2" >
                <img :src="require('../assets/' + imageUrl1)" style="width: 25px; 
                    height: 25px;
                    position: relative;
                    bottom: 13px;
                    left: 25px;">
                朋友
            </van-tabbar-item>
           

            <van-tabbar-item style="background-color: #EDEDED;padding-top: 10px;margin-top: 6px;"   @click="kongzhitupian" >
                <img :src="require('../assets/' + imageUrl)" style="width: 20px; 
                    height: 20px;
                    position: relative;
                    bottom: 15px;
                    left: 25px;" >
                    我的
            </van-tabbar-item>

        </van-tabbar>
    </div>
</template>

<script>

export default {
    name:'Home',
    
    data() {
        return {
            active: 0,
            imageUrl: '5.png',
            imageUrl1:'p1.png'
            
        }
    },
    methods: {
        kongzhitupian(){
            this.imageUrl1='p1.png'
            this.imageUrl='4.png'
            this.$router.push('/home/im')
        },
        kongzhitupian1(){
            this.imageUrl1='p1.png'
            this.imageUrl='5.png'
            this.$router.push('/home/list')
        },
        kongzhitupian2(){
            this.imageUrl1='p.png'
            this.imageUrl='5.png'
            this.$router.push('/home/search')
        },
        
    },
    created() {
    /*解决进入二级路由返回默认选中首页tab的问题*/
        const navBarActive = window.location.hash;
        if(navBarActive.includes("#/home/list")){
            this.active = 0;
           
        } else if(navBarActive.includes("#/home/search")){
            this.imageUrl1='p.png'
            this.active = 1;
        } else if(navBarActive.includes("#/home/im")){
            this.imageUrl='4.png'
            this.active = 2;
        }
    }

    
    
    
}
</script>


<style scoped>
.van-tabbar-item__text{
    margin-top: 6px;
}
</style>
